<template>
    <div class="main-container" id="content">
        <div class="main-content">
            <div class="top-content">
                <div class="top-name">巡检任务</div>
                <el-button class="pad-back" @click="back()">返回</el-button>
            </div>
            <div class="bottom-content">
                <div class="top-box"
                    style="display: flex; justify-content: space-between; border-bottom: 1.5px solid #e4e7ed;">
                    <div></div>
                    <div style="margin-top: 2rem;">
                        <el-button :style="{ 'color': isChange == undefined ? '#409eff' : 'black' }" @click="getList()"
                            style="width: 7rem;height: 3rem;font-size: 2.3rem;background-color: #fff;color: black;border: 0;">全选</el-button>
                        <el-button :style="{ 'color': isChange == 1 ? '#409eff' : 'black' }" @click="getList(1)"
                            style="width: 7rem;height: 3rem;font-size: 2.3rem;background-color: #fff;color: black;border: 0;">已处理</el-button>
                        <el-button :style="{ 'color': isChange == 0 ? '#409eff' : 'black' }" @click="getList(0)"
                            style="width: 7rem;height: 3rem;font-size: 2.3rem;background-color: #fff;color: black;border: 0;">未处理</el-button>
                    </div>

                </div>
                <div class="bottom-box" v-for="item in tableData" :key='item.id'>
                    <div style="position: relative; float: right; margin-right: 3rem;">
                        <img v-if="item.status == 0 && item.typeOver == 1" style="height: 6rem" src="@/assets/3.png" alt="">
                        <img v-if="item.status == 0 && item.typeOver == 2" style="height: 6rem" src="@/assets/2.png" alt="">
                        <img v-if="item.status == 0 && item.typeOver != 1 && item.typeOver != 2" style="height: 6rem"
                            src="@/assets/1.png" alt="">
                        <img v-if="item.status == 1" style="height: 6rem" src="@/assets/4.png" alt="">
                    </div>
                    <div style="margin-left: 2rem;padding-top: 1rem;">
                        <div style="margin:2rem 1rem; margin-top: 3rem; font-size: 2.5rem;">
                            {{ item.baseName }}
                        </div>
                        <el-row style="margin:2rem 1rem;margin-top: 3rem;">
                            <el-col :span="12">
                                <div>
                                    巡检开始时间: {{ item.startDateTime }}
                                </div>
                            </el-col>
                            <div>
                                巡检结束时间: {{ item.endDateTime }}
                            </div>
                        </el-row>
                        <el-row style="margin:2rem 1rem;margin-top: 3rem;">
                            <el-col :span="12">
                                <div>
                                    处理内容: {{ item.content }}
                                </div>
                            </el-col>
                            <div>
                                <!-- 巡检人: {{ item.dealUserName }} -->
                            </div>
                        </el-row>


                        <div style="margin:0rem 1rem; display: flex; line-height: 80px;justify-content: space-between;">
                            <div style="display: flex;">
                                <div>
                                    巡检图片:
                                </div>
                                <el-image style="height:80px;width: 80px;margin-left: 2rem;" :src="
                                    item.images != null ? item.images.split(',')[0] : ''
                                " :preview-src-list="
    item.images != null ? item.images.split(',') : []
" fit="contain">
                                </el-image>
                            </div>
                            <div style="margin-top: 4rem;margin-right: 5rem;">
                                <el-button @click="goRouter(item)"
                                    style="width: 8rem;height: 3rem;border-radius: 20px; font-size: 2.3rem;"
                                    type="primary">处理</el-button>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>


    </div>
</template>
<script>
import NxTablePad from "@/components/NxTablePad.vue";
// import addEditDialog from './components/addEditDialog.vue'
import { Page } from "@/utils/pagination";
import {

    getXcxTaskRenovateList,
    getObjBoxs
} from '@/api/home'
import { getCompanyInfoTree } from "@/api/company";
import {
    getSysCompanyBases
} from "@/api/system";
import { getStockInOrderPadList, getStockInOrderDetailPad, approveStockInOrderPad } from "@/api/godown";
export default {
    components: {
        NxTablePad,
    },
    data() {
        return {
            isChange: '',
            activeName: 'first',
            companyArray: [],
            baseArray: [],
            boxArray: [],
            addEditStatus: "add",
            addEditId: "", // 添加编辑rowid
            addFishTypeIsDialog: false,
            changeOrderId: "", // 调整单id
            companyId: "",
            baseId: "",
            typeOver: '',
            timer: '',
            // 查询字段
            searchForm: {
                pageNum: 1,
                pageSize: 10,
                type: 0,
                typeName: "",
                approveStatus: "",
                companyId: "",
                baseId: "",
                startDate: "",
                endDate: "",
                code: "",
            },
            // 表格字段
            tableCols: [
                {
                    label: '控制箱名称',
                    prop: 'boxName',
                    align: 'center',
                },
                {
                    label: '鱼池',
                    prop: 'fishpondName',
                    align: 'center',
                },

                {
                    label: '告警类型',
                    prop: 'alarmType',
                    align: 'center',
                },
                {
                    label: '报警时长(秒)',
                    slot: 'alarmLength',
                    align: 'center',
                },
                {
                    label: '开始时间',
                    prop: 'startDate',
                    align: 'center',
                },
                {
                    label: '结束时间',
                    prop: 'endDate',
                    align: 'center',
                },



            ],
            tableData: [],
            date: [], // 日期范围
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            pagination: new Page(),
            detailId: "", //详情rowid
            detailStatus: "deatail",
            detailIsDialog: false, //详情审核页面状态
            typeName: "",
            infosData: [], // 转移记录详情
            userType: "", // 用户类型（0超级管理员，1公司管理员，2公司员工）
        };
    },
    async mounted() {
        // 初始化加载
        this.userType = Number(window.localStorage.getItem("userType"));
        this.searchForm.userType = this.userType
        console.log(this.searchForm.userType);
        await this.getCompanyInfoTree();
        await this.getList();
        this.setInterval()
    },
    //销毁钩子
    beforeDestroy() {
        // // 清除定时器
        if (this.timer) {
            clearInterval(this.timer)
            // const element = document.getElementById('content')
            // screenfull.exit(element)
        }
    },
    methods: {
        // 3s一次页面刷新
        setInterval() {
            let that = this
            this.timer = window.setInterval(() => {
                setTimeout(() => {
                    that.getList() //我们的获取接口数据函数
                }, 0)
            }, 30000)
        },
        // 获取当前时间
        getNowDate() {
            var date = new Date();
            var sign2 = ":";
            var year = date.getFullYear() // 年
            var month = date.getMonth() + 1; // 月
            var day = date.getDate(); // 日
            var hour = date.getHours(); // 时
            var minutes = date.getMinutes(); // 分
            var seconds = date.getSeconds() //秒
            var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
            var week = weekArr[date.getDay()];
            // 给一位数的数据前面加 “0”
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minutes >= 0 && minutes <= 9) {
                minutes = "0" + minutes;
            }
            if (seconds >= 0 && seconds <= 9) {
                seconds = "0" + seconds;
            }
            return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
        },

        handleClick(tab, event) {
            console.log(tab, event);
        },

        // 路由之间的跳转
        goRouter(item) {
            console.log(item);
            this.$router.push({
                path: '/Inspection/InspectionDetail',
                query: item,
            });
        },

        // 返回
        back() {
            this.$router.go(-1);
        },
        // 查询
        onSubmit() {
            this.pagination.pageNum = 1;
            this.getList();
        },

        // 分页查询
        refresh(val) {
            this.searchForm.pageNum = val.pageNum;
            this.searchForm.pageSize = val.pageSize;
            this.getList();
        },
        DifferHourTime(startDate, endDate) {
            return Math.floor((new Date(endDate).getTime() - new Date(startDate).getTime()) / 3600000)
        },
        // 查询列表
        getList(item) {
            this.isChange = item
            this.searchForm.status = item
            getXcxTaskRenovateList(this.searchForm).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data;
                    this.pagination.count = res.data.total;
                    // console.log(this.tableData);
                    let time = new Date();
                    // 判断时间是否已经超时
                    this.tableData.forEach(item => {
                        let newTime = JSON.stringify(item.endDateTime)
                        let result = JSON.parse(newTime)
                        result = result.replace("-", "/")
                        result = new Date(Date.parse(result));
                        if (time > result) {
                            // console.log(`当前时间大于自定义时间！\n当前时间：${time}\n自定义时间：${result}`);
                            item.typeOver = 1
                        } else if (time < result) {
                            this.DifferHourTime(time, result)
                            console.log(1222);
                            if (this.DifferHourTime(time, result) == 0) {
                                item.typeOver = 2
                            }
                        }
                    })
                    console.log(time);
                    // console.log();
                }
            });
        },
        // 详情
        handleDetail(row) {
            this.detailId = row.id + "";
            this.detailStatus = "see";
            this.detailIsDialog = true;
        },
        //审批
        handleApproval(row) {
            this.$confirm("正在对该入库记录进行审批是否通过?", "提示", {
                confirmButtonText: "通过",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    approveStockInOrderPad({ id: row.id }).then((res) => {
                        if (res.code == 200) {
                            this.$message({
                                type: "success",
                                message: res.msg,
                            });
                            this.getList();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
        getCompanyInfoTree() {

            getCompanyInfoTree({ id: 0 }).then((res) => {
                if (res.code == 200) {
                    this.companyArray = res.data
                    if (res.data.length > 0) {
                        this.searchForm.companyId = res.data[0].id
                        this.getSysCompanyBases()
                    }
                }
            })

        },
        changeTreeItem(val) {
            if (val) {
                this.searchForm.companyId = val[val.length - 1]
            } else {
                this.searchForm.companyId = ''
            }

            this.searchForm.baseId = ''
            this.baseArray = []

            // 获取基地列表
            this.getSysCompanyBases()
        },
        getSysCompanyBases() {
            if (
                this.searchForm.companyId === '' ||
                this.searchForm.companyId == null
            ) {
                return
            }

            getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
                if (res.code == 200) {
                    this.baseArray = res.data
                    if (res.data.length > 0) {
                        this.searchForm.baseId = res.data[0].id
                        this.getObjBoxs()

                    }
                }
            })
        },

        getObjBoxs() {
            getObjBoxs({ id: this.searchForm.baseId }).then((res) => {
                if (res.code == 200) {
                    this.boxArray = res.data;
                }
            });
        },
        // 重置表单
        resetForm() {
            this.searchForm = {
                pageNum: 1,
                pageSize: 10,
                type: 0,
                typeName: "",
                approveStatus: "",
                companyId: "",
                baseId: "",
                startDate: "",
                endDate: "",
                code: "",
            };
            this.date = [];


            this.onSubmit();
        },


    },
};
</script>
<style lang="less" scoped>
/deep/.el-tabs__nav {

    float: right !important;
    margin-right: 2rem;
}

/deep/.el-tabs__item {
    margin: 2rem;
    font-size: 3rem !important;
}

/deep/.el-tabs__active-bar {
    width: 0 !important;
    transform: translateX(0px px);
}

.bottom-content {
    width: 97%;
    // min-height: 30rem;
    // display: flex;
    // justify-content: Fcenter;
    height: 70rem;
    background: #ffffff;
    border-radius: 0.43rem;
    overflow: scroll;

    .bottom-box {
        width: 95%;
        height: 35rem;
        background-color: #f0f4f7;
        margin: 3rem;
        box-shadow: 10px 10px 5px #eae9e9;
        margin-top: 4rem;
        border-radius: 30px;
        font-size: 2rem;
        font-weight: bold;
    }
}


/*滚动条整体样式*/
::-webkit-scrollbar {
    width: 0.59rem;
    // height: 8.93rem;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    // background: #d9d9d9;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
    border-radius: 10px;
    // background: #ededed;
}

* {
    box-sizing: content-box;
}

.main-container {
    background-color: #045cad;
    padding: 1rem 0 1.5rem 0;

    .main-content {
        min-height: calc(100vh - 90px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .top-content {
            width: 97%;
            height: 5rem;
            // margin-top: 1rem;
            margin-bottom: 0.5rem;
            color: #ffffff;
            display: flex;
            justify-content: center;
            font-family: "宋体";
            position: relative;
            // border: 1px solid red;
            position: relative;

            .top-name {
                font-size: 2.59rem;
                font-weight: 900;
            }

            .el-icon-full-screen {
                line-height: 3rem;
                margin-left: 5rem;
            }
        }


    }
}

// 调整button的宽高
.my-el-search {
    .el-button {
        // margin-left: 4rem;
        text-align: center;
        width: 10rem;
        height: 2.6rem;
        font-size: 2rem;
    }
}

// 调整select的宽高
.my-el-select {
    margin-right: 5rem;

    /* selecte 框的高度设置，默认是 40px*/
    /deep/ .el-input__inner {
        height: 4.5rem;
        width: 25rem;
        font-size: 1.86rem;
        padding-left: 2rem;
    }

    /* 下面设置右侧按钮居中 */
    .el-input__suffix {
        top: 5px;
    }

    //    icon样式设置
    /deep/.el-input__icon {
        font-size: 0;
    }

    .el-input__suffix-inner {
        display: inline-block;
    }

    /deep/.el-date-editor .el-range-separator {
        margin: 0 1rem;
        line-height: 4.285714rem;
        font-size: 1.86rem;
        width: 10%;
    }

    /deep/.el-range-editor.el-input__inner {
        padding: 0;
    }

    /deep/.el-date-editor .el-range-input {
        width: 100%;
        font-size: 1.86rem;
    }

    ::v-deep .el-select-dropdown__item {
        font-size: 2.16rem;
        height: 4.428571rem;
        line-height: 4.428571rem;
    }

    ::v-deep.el-input--small .el-input__inner {
        height: 4rem;
        width: 10rem !important;
        font-size: 1.3rem;
        text-align: center;
        padding: 0;
    }
}
</style>
  